<template>
   <div>
      <div style="display:flex;justify-content:space-between">
        <el-row :gutter="20" v-for="item in cardList" :key="item.content">
          <el-col :span="6"><el-card class="box-card">
            <div slot="header" class="clearfix">
               <p>{{item.title}}</p>
                <el-button style="float: right; padding: 3px 0" type="text">详情</el-button>
            </div>
            <div  class="text item">
              {{item.content}} 
            </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div>
        <div id="c1" ></div>
      <div id="mountNode" ></div>
      <div id="mountNode1"></div>
      </div>
   </div>
</template>

<script>
import G2 from "@antv/g2";

export default {
  data() {
    return {
      cardList: []
    };
  },
  created() {
    this.$get("/system/cardCount").then(res => {
      this.cardList = res.data;
    });
  },
  mounted() {
    this.getChart1();
    this.getChart2();
    this.getChart3();
  },
  methods: {
    getChart1() {
      const data = [
        { genre: "Sports", sold: 275 },
        { genre: "Strategy", sold: 115 },
        { genre: "Action", sold: 120 },
        { genre: "Shooter", sold: 350 },
        { genre: "Other", sold: 150 }
      ]; // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
      // Step 1: 创建 Chart 对象
      const chart = new G2.Chart({
        container: "c1", // 指定图表容器 ID
        width: 600, // 指定图表宽度
        height: 300 // 指定图表高度
      });
      // Step 2: 载入数据源
      chart.source(data);
      // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
      chart
        .interval()
        .position("genre*sold")
        .color("genre");
      // Step 4: 渲染图表
      chart.render();
    },
    getChart2() {
      var data = [
        {
          year: "1951 年",
          sales: 38
        },
        {
          year: "1952 年",
          sales: 52
        },
        {
          year: "1956 年",
          sales: 61
        },
        {
          year: "1957 年",
          sales: 60
        },
        {
          year: "1958 年",
          sales: 48
        },
        {
          year: "1959 年",
          sales: 38
        },
        {
          year: "1960 年",
          sales: 38
        },
        {
          year: "1962 年",
          sales: 38
        }
      ];
      var chart = new G2.Chart({
        container: "mountNode",
        width: 500,
        height: 300
      });
      chart.source(data);
      chart.scale("sales", {
        tickInterval: 20
      });
      chart
        .interval()
        .position("year*sales")
        .color("year");
      chart.render();
    },
    getChart3() {
      var data = [
        {
          item: "事例一",
          count: 40,
          percent: 0.4
        },
        {
          item: "事例二",
          count: 21,
          percent: 0.21
        },
        {
          item: "事例三",
          count: 17,
          percent: 0.17
        },
        {
          item: "事例四",
          count: 13,
          percent: 0.13
        },
        {
          item: "事例五",
          count: 9,
          percent: 0.09
        }
      ];
      var chart = new G2.Chart({
        container: "mountNode1",
        forceFit: true,
        height: window.innerHeight
      });
      chart.source(data, {
        percent: {
          formatter: function formatter(val) {
            val = val * 100 + "%";
            return val;
          }
        }
      });
      chart.coord("theta", {
        radius: 0.75
      });
      chart.tooltip({
        showTitle: false,
        itemTpl:
          '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
      });
      chart
        .intervalStack()
        .position("percent")
        .color("item")
        .label("percent", {
          formatter: function formatter(val, item) {
            return item.point.item + ": " + val;
          }
        })
        .tooltip("item*percent", function(item, percent) {
          percent = percent * 100 + "%";
          return {
            name: item,
            value: percent
          };
        })
        .style({
          lineWidth: 1,
          stroke: "#fff"
        });
      chart.render();
    }
  }
};
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix {
  display: flex;
  justify-content: space-between;
}

.box-card {
  width: 240px;
}
</style>
